<template>
  <view class="content">
    <uni-search-bar v-model="searchValue" radius="5" confirmType="search" @confirm="getData" placeholder="输入昵称/手机号搜索" clearButton="auto" cancelButton="none" />

    <uni-list :border="false">
      <uni-list-item class="list1">
        <!-- 自定义 body -->
        <template v-slot:body>
          <view class="list">
            <view class="flex1">会员信息</view>
            <view class="wid1">加入时间</view>
            <view class="wid">正在置换中</view>
          </view>
        </template>
      </uni-list-item>
    </uni-list>
    <view class="list2">
      <scroll-view :style="{ height: `${heightAuto}px` }" v-if="dogList && dogList.length > 0" class="hei-full" @scrolltolower="lower" scroll-y="true">
        <uni-list>
          <uni-list-item v-for="item in dogList" :key="item.id">
            <!-- 自定义 body -->
            <template v-slot:body>
              <view class="list">
                <view class="flex1">
                  <image class="slot-image" :src="item.avatar || '/static/images/dog_logo.jpg'" mode="aspectFill"></image>
                  <view class="info">
                    <view>{{ item.nickname }}</view>
                    <view v-if="item.mobile">ID:{{ item.mobile }}</view>
                    <view>会员ID:{{ item.uid }}</view>
                  </view>
                </view>
                <view class="wid1">{{ item.createtime }}</view>
                <view class="wid">
                  <view class="info">
                    <view> {{ item.noAdopt_num }}</view>
                    <view><button @click="goto(`/pages/dog/company/replacement-detail?launch_user_id=${item.uid}&nickname=${item.nickname}&avatar=${item.avatar}`)"  type="primary" size="mini">查看详情</button></view>
                  </view>
                </view>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </scroll-view>
      <statusTips v-else></statusTips>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const searchValue = ref('');
import { onLoad } from '@dcloudio/uni-app';
import { getUserPartner } from '@/api/bgame';
import statusTips from '@/components/statusTips/statusTips.vue';
import { useUserStoreHook } from '@/store/user';
const heightAuto = ref(0);
const dogList = ref([]);
const goto = (path: any) => {
  uni.navigateTo({
    url: path,
  });
};
const getData = async () => {
  uni.showLoading({
    title: '获取信息中...',
    mask: true,
  });
  const res: any = await getUserPartner({ keyword: searchValue.value });
  uni.hideLoading();
  if (1 == res.result) {
    dogList.value = res.data || [];
  }
};

// 在页面的onLoad方法中调用
onLoad(async () => {
  await useUserStoreHook().getSign();
  getData();
  uni.getSystemInfo({
    success: function (res: any) {
      // 获取状态栏高度
      const statusBarHeight = res.statusBarHeight;
      // 获取窗口高度
      const windowHeight = res.windowHeight;
      // 计算可视区域高度（这里假设没有自定义导航栏或已经减去）
      const visibleHeight = windowHeight - statusBarHeight;
      // 将可视区域高度保存到页面的data中或进行其他处理
      console.log('visibleHeight', visibleHeight - 115);
      heightAuto.value = visibleHeight - 115;
      // that.setData({
      //   visibleHeight: visibleHeight
      // });
    },
  });
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;
}

.slot-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.listbody {
  width: 300rpx;
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  text {
    padding-left: 10rpx;
    padding-right: 10rpx;
  }
}

.listfooter {
  width: 90px;
  display: flex;
  align-items: center;
}

.list {
  width: 100%;
  display: flex;
  font-size: 0.9rem;

  .flex1 {
    flex: 1;
    width: 0;
  }

  .wid {
    width: 90px;
    text-align: center;
  }
  .wid1 {
    width: 80px;
    text-align: center;
  }
}

.list1 {
  background-color: #f5f5f5 !important;
}

.list2 {
  overflow-y: auto;

  .flex1 {
    display: flex;
    align-items: center;

    .slot-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .info {
      font-size: 12px;
      color: gray;
      margin-left: 4px;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
